<template>
	<view class="">
		<!-- 正式使用需去除导航栏 -->
		<navigationBar title="popup" btns="弹出popup" :btn='btn' :i='i' @next='next'></navigationBar>
		
		<!-- 正式使用需去除导航栏 -->
		<view v-if="bool">
			<view class="mask"></view>
			<view  class="popup_k">
				<!-- 标题区 -->
				<text v-if="title_bool" class="text_title">
					{{title}}
				</text>
				<!-- 内容区 -->
				<text class="text_content">
					{{content}}
					<!--  -->
				</text>
				<!-- 按钮区 -->
				<view v-if="single_btn" style="display: flex;flex-direction: row;justify-content: space-around;margin-top:20rpx ;margin-bottom: 40rpx;">
					<view class="btn-1"><text class="text-y" @click="prop_n">{{btn_n}}</text></view>
					<view class="btn-2"><text class="text-n" @click="prop_y">{{btn_y}}</text></view>
				</view>
				<view v-else class="btn_single"><text class="text-n" @click="Single">{{btn_y}}</text></view>
			</view>
		</view>
		
		<view type="primary" class="btn_s" @click="props">弹出popup</view>
		
		
		<!-- <view type="primary" class="btn_s" :style="{backgroundColor:by_color}" @click="props">弹00</view> -->
	</view>
</template>

<script>
	import navigationBar from "@/components/navigation-bar/navigation-bar.vue" //导航栏
	import {  mapState, mapMutations, mapGetters  } from 'vuex';
	export default {
		computed:{
			...mapGetters(['by_color'])
		},
		components: {
			navigationBar,

		},
		props:{
			//标题
			title:{
				type: String,
				default: '这里是标题'
			},
			//标题的显示和隐藏
			title_bool:{
				type:Boolean,
				default:true
			},
			// 内容区域
			content:{
				type: String,
				default: "如有疑问请联系客服或重新关联如有疑问请联系客服或重新关联如有疑问请联系客服或重新关联 如有疑问请联系客服或重新关联如有疑问请联系客服或重新关联如有疑问请联系客服或重新关联 如有疑问请联系客服或重新关联如有疑问请联系客服或重新关联如有疑问请联系客服或重新关联"
			},
			// 左侧按钮内容
			btn_n:{
				type: String,
				default: '左按钮'
			},
			// 右侧按钮内容
			btn_y:{
				type: String,
				default: '右按钮'
			},
			//只显示一个按钮时，按钮内容
			single_btn:{
				type:Boolean,
				default:true
			}
		},
		data() {
			return {
				i: 5,
				btn: true,
				bool: false
			}
		},
		methods: {
			props() {
				this.bool=true
			},
			next(){
				this.bool=true
			},
			prop_n(){
				this.$emit('prop_n')
				uni.showToast({
					title:`点击了取消按钮`,
					icon:'none'
				})
				this.bool=false
			},
			prop_y(){
				this.$emit('prop_n')
				uni.showToast({
					title:`点击了开启按钮`,
					icon:'none'
				})
				this.bool=false
			},
			Single(){
				this.$emit('Single')
				uni.showToast({
					title:`点击了单独按钮`,
					icon:'none'
				})
				this.bool=false
			}
			
		}

	}
</script>

<style lang="scss">
	.mask {
		position: fixed;
		width: 100%;
		height: 100%;
		background-color: #7f7f7f;
		opacity: 0.5;
	}

	.popup_k {
		width: 574rpx;
		padding-left: 25rpx;
		padding-right: 25rpx;
		background-color: #ffffff;

		position: fixed;
		top: 467rpx;
		left: 88rpx;
		border-radius: 20rpx;

		display: flex;
		flex-direction: column;
	}

	.text_title {
		margin-top: 51rpx;
		
		text-align: center;
		font-size: 36rpx;
		font-family: Source Han Sans CN;
		font-weight: 600;
		color: #222222;
	}

	.text_content {
		margin-top: 31rpx;
		text-align: center;
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #606266;

	}

	.btn-1 {
		width: 217rpx;
		height: 80rpx;
		border-radius: 40rpx;
		background-color: #CCCCCC;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.text-y {
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #222222;
	}

	.btn-2 {
		width: 217rpx;
		height: 80rpx;
		border-radius: 40rpx;
		background-color: #4a8af4;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.btn_single{
		width: 417rpx;
		height: 80rpx;
		margin-left: 55rpx;
		margin-top:20rpx ;
		margin-bottom: 40rpx;
		border-radius: 40rpx;
		background-color: #4a8af4;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.text-n {

		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #ffffff;
	}
	.btn_s{
		width: 200rpx;height: 80rpx;border-radius: 20rpx; background-color: #4a8af4;color: #ffffff;padding-top: 20rpx;padding-left: 20rpx;margin-left: 275rpx;
	}
</style>
